<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>组合分页测试</title>
	</head>

	<body>
		<h1>组合分页测试</h1>
		<h2>数据来自两个数组</h2>
		<div>
			<div>pageSize:
				<select name="pageSize" id="pageSize" value="10" style="width: 200px;">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="5">5</option>
					<option value="10">10</option>
					<option value="20">20</option>
					<option value="30">30</option>
					<option value="40">40</option>
					<option value="50">50</option>
					<option value="60">60</option>
				</select>
				<div>pageIndex:<input type="number" name="pageIndex" id="pageIndex" value="1" /></div>
				<div><input type="button" name="ok" id="ok" value="ok" /></div>
				<div id="list"></div>
			</div>
	</body>
	<script type="text/javascript">
		var arrNum = [];
		var arrAlpha = [];
		var arrColor = ['red', 'green', 'blue', 'pink', 'yellow'];
		for(var i = 0; i < 100; i++) {
			arrNum.push(i);
		}
		for(var i = 65; i < 91; i++) {
			arrAlpha.push(String.fromCharCode(i));
			arrAlpha.push(String.fromCharCode(i + 32));
		}

		/**
		 * 获取列表的某部分数据
		 * @param {Object} list 数据源
		 * @param {Object} start 起点
		 * @param {Object} dataCount 数据数量
		 */
		function getDataSpan(list, start, dataCount) {
			var end = start + dataCount;
			var arr = [];
			for(var i = start; i < end; i++) {
				var tmp = list[i];
				//用于优化查询的末尾为undefined的时候就直接返回数据
				if(tmp === undefined) {
					return {
						list: arr,
						totalCount: list.length
					};
				} else {
					arr.push(tmp);
				}
			}
			return {
				list: arr,
				totalCount: list.length
			};
		}

		function getPaginationData(list, pageIndex, pageSize) {
			var start = (pageIndex - 1) * pageSize;
			return getDataSpan(list, start, pageSize);
		}
		var cache = {};

		function getPaginationData2(list1, list2, pageIndex, pageSize) {
			//			if(cache[pageIndex + '-' + pageSize]) {
			//				return cache[pageIndex + '-' + pageSize];
			//			}
			var start = (pageIndex - 1) * pageSize;
			var data1 = getDataSpan(list1, start, pageSize);
			//如果data1的数据不足一页和data1的数据在此页码里面没有
			if(data1.list.length < pageSize) {
				//list2中进行获取数据的起点
				//如果start-data1.totalCount<0,则说明数据起点在list1中，而且一定是不足一页，
				//所以在list2中只需要从第一位(0)开始读取即可，然后读取剩下的数据量
				//如果大于0，则说明起点是在list2中，则起点去掉list1总共占据的起点数，则是在list2中的起点位置
				var start2 = start < data1.totalCount ? 0 : start - data1.totalCount;
				var dataCount = pageSize - data1.list.length; //list2中还需要获取的数据量
				var data2 = getDataSpan(list2, start2, dataCount);
			} else {
				var data2 = getDataSpan(list2, 0, 0);
			}
			var result = {
				list: data1.list.concat(data2.list),
				totalCount: data1.totalCount + data2.totalCount
			}
			//			cache[pageIndex + '-' + pageSize] = result;
			return result;

		}

		function getPaginationData3(list1, list2, list3, pageIndex, pageSize) {
			var start = (pageIndex - 1) * pageSize;
			var data1 = getDataSpan(list1, start, pageSize);
			if(data1.list.length < pageSize) {
				var start2 = start < data1.totalCount ? 0 : start - data1.totalCount;
				var pageSize2 = pageSize - data1.list.length;
				var data2 = getDataSpan(list2, start2, pageSize2);
				if((data1.list.length + data2.list.length) < pageSize) {
					var start3 = start < (data1.totalCount + data2.totalCount) ? 0 : start - (data1.totalCount + data2.totalCount);
					var pageSize3 = pageSize - data1.list.length - data2.list.length;
					var data3 = getDataSpan(list3, start3, pageSize3);
				} else {
					var data3 = getDataSpan(list3, 0, 0);
				}
			} else {
				var data2 = getDataSpan(list2, 0, 0);
				var data3 = getDataSpan(list3, 0, 0);
			}
			var result = {
				list: data1.list.concat(data2.list).concat(data3.list),
				totalCount: data1.totalCount + data2.totalCount + data3.totalCount
			}
			return result;
		}
		document.querySelector('#ok').onclick = function() {
			var pageSize = parseInt(document.querySelector('#pageSize').value);
			var pageIndex = parseInt(document.querySelector('#pageIndex').value);
			var result = getPaginationData3(arrNum, arrAlpha,arrColor, pageIndex, pageSize);
			document.querySelector('#list').innerHTML = "list:" + result.list.toString() + "<br/>total count:" + result.totalCount;
		}
	</script>

</html>